<template>
    <el-dialog
        title="标签规则变量模板"
        :close-on-click-modal="false"
        :visible.sync="visible"
        class="SHZY-dialog SHZY-dialog_center"
        lock-scroll
        width="35%"
    >
        <el-table
            v-loading="listLoading"
            :data="list"
            height="350px"
            custom-column
        >
            <el-table-column label="标签变量" prop="labefield" align="left">
            </el-table-column>
            <el-table-column label="标签规则" prop="rulerId" align="left">
                <template slot-scope="scope">
                    <el-select
                        v-model="scope.row.rulerId"
                        disabled
                        :style="{ width: '100%' }"
                    >
                        <el-option
                            v-for="(item, index) in dataRulerIdOptions"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import { getLabelRulesAllList } from "@/api/common/labelRules";
export default {
    components: {},
    props: [],
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            list: [],
            listLoading: true,
            multipleSelection: [],
            labelRulerTemplate: undefined,
            dataRulerIdOptions: [],
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getrulerList();
    },
    mounted() {},
    methods: {
        goBack() {
            this.$emit("refresh");
        },
        init(lr) {
            this.labelRulerTemplate = lr || "[]";
            this.visible = true;
            this.$nextTick(() => {
                this.initData();
            });
        },
        initData() {
            this.listLoading = true;
            if (this.labelRulerTemplate) {
                this.list = JSON.parse(this.labelRulerTemplate);
                this.listLoading = false;
            }
        },
        getrulerList() {
            getLabelRulesAllList().then((res) => {
                this.dataRulerIdOptions = res.data.list;
            });
        },
    },
};
</script>
